<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Sheets Entry 2</title>
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <!-- 窗口控制按钮 -->
    <div class="window-controls-bar">
        <div class="window-title">Google Sheets Entry 2</div>
        <div class="window-controls">
            <button class="control-btn minimize-btn" onclick="minimizeWindow()" title="最小化">
                <svg viewBox="0 0 12 12" width="12" height="12">
                    <path d="M2 6h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </button>
            <button class="control-btn maximize-btn" title="最大化">
                <svg viewBox="0 0 12 12" width="12" height="12">
                    <path d="M2 2h8v8H2z" fill="none" stroke="currentColor" stroke-width="1.5"/>
                </svg>
            </button>
            <button class="control-btn close-btn" onclick="closeWindow()" title="关闭">
                <svg viewBox="0 0 12 12" width="12" height="12">
                    <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
            </button>
        </div>
    </div>
    
    <!-- Header -->
    <div class="header">
        <button class="settings-btn" onclick="openSettings()">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path d="M12 1l9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 110-8 4 4 0 010 8zm0-2a2 2 0 100-4 2 2 0 000 4z"/>
            </svg>
        </button>
        <h1>Google Sheets Entry 2</h1>
    </div>

    <!-- Settings Panel -->
    <div id="settings-panel" class="settings-panel" style="display: none;">
        <h2>Google Sheets Settings</h2>
        <div id="sheet-list"></div>
        <button class="add-sheet" onclick="addSheet()">+ Google Sheets ID</button>
        <div class="action-buttons">
            <button onclick="saveSettings()">Save</button>
            <button onclick="closeSettings()">Close</button>
        </div>
    </div>

    <!-- Main Content -->
    <div id="googleSheetsEntry">
        <div class="entry-form">
            <form>
                <div class="form-columns">
                    <div class="column">
                        <div class="container">
                            <input type="text" id="plmCode" class="input" placeholder="PLM Code">
                            <button type="button" class="search__btn" onclick="searchCode()">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
                                    <path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z" fill="#efeff1"></path>
                                </svg>
                            </button>
                        </div>
                        <div class="user-box">
                            <input type="text" id="tcfType" required>
                            <label>TCF type (Full/Partial)</label>
                        </div>
                        <div class="user-box">
                            <input type="text" id="sampleReceivedDate" required>
                            <label>TCF review sample received date</label>
                        </div>
                        <div class="user-box">
                            <input type="text" id="reviewFromDate" required>
                            <label>TCF review from date (received 1st report)</label>
                        </div>
                    </div>
                    <div class="column">
                        <div class="container">
                            <div id="search-results" style="display: none;">
                                <p id="search-results-text"></p>
                            </div>
                        </div>
                        <div class="user-box">
                            <input type="text" id="validateDate" required>
                            <label>TCF validate date (all reports ok)</label>
                        </div>
                        <div class="user-box">
                            <input type="text" id="closeDate" required>
                            <label>TCF CLOSE DATE</label>
                        </div>
                        <div class="user-box">
                            <input type="text" id="statusUpdate" required>
                            <label>TCF status regular update</label>
                        </div>
                        <div class="user-box">
                            <input type="text" id="closureStatus" required>
                            <label>TCF closure status</label>
                        </div>
                    </div>
                </div>
                <a href="#" onclick="handleEntry(event)">
                    ENTRY
                    <span></span>
                </a>
            </form>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="loading-overlay" style="display: none;">
        <div class="loading-spinner"></div>
        <p id="loading-text">Loading...</p>
    </div>

    <!-- Message Toast -->
    <div id="message-toast" class="message-toast" style="display: none;">
        <span id="message-text"></span>
        <button onclick="closeMessage()">&times;</button>
    </div>

    <!-- Scripts -->
    <script src="google-sheets-service-browser.js"></script>
    <script src="script.js"></script>
</body>
</html>